<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.5.0pr2/build/cssreset/cssreset.css" type="text/css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.5.0pr2/build/cssfonts/cssfonts.css" type="text/css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.5.0pr2/build/cssgrids/cssgrids.css" type="text/css">
    <script src="http://yui.yahooapis.com/3.5.0pr2/build/yui/yui.js"></script>
    <script src="../m3958-module-js/yui-bg-slideshow.js"></script>
    <script src="../m3958-module-js/slidecontrol.js"></script>
    <link rel="stylesheet" href="../m3958-module-css/slidecontrol.css" type="text/css">
    
    
    <style type="text/css">
    
    #panelContent.yui3-panel-content .yui3-widget-hd {
		padding: 8px 28px 8px 8px;
		min-height: 13px;
		_height: 13px;
		color: white;
		background: -webkit-gradient(linear,left bottom,left top,from(#2647A0),color-stop(0.07,#2647A0),color-stop(0.5,#3D67CE),to(#426FD9));
		background: -moz-linear-gradient(0% 100% 90deg,#2647A0 7%,#3D67CE 50%,#426FD9 100%);
		background: -webkit-gradient(linear,left bottom,left top,from(#2647A0),color-stop(0.07,#2647A0),color-stop(0.5,#3D67CE),to(#426FD9));
	}
	
	#panelContent.yui3-panel-content .yui3-widget-ft {
		background: #EDF5FF;
		padding: 8px;
		text-align: right;
		}
		
.yui3-panel {
    outline: none;
}

.yui3-panel #panelContent {
    -webkit-box-shadow: 0px 0px 2px black;
    -moz-box-shadow: 0px 0px 2px black;
    box-shadow: 0px 0px 2px black;
}
.yui3-panel #panelContent .yui3-widget-hd {
    font-weight: bold;
    padding: 5px;
}

#panelContent .yui3-widget-bd {
    padding: 15px;
    background: white;
    text-align: center;
}


.yui3-skin-sam .yui3-widget-mask {
    background-color: #223460;
    opacity: 0.9;
}
    </style>
    
<style type="text/css">

#main-cavan{
	/*
	position: absolute;
	top: -10000;
	display: none;
	*/
}
.slideshow {
/*
    height: 262px;
    margin: 20px;
    width: 342px;
    */
        overflow: hidden;
}

.slideshow img {
    background: none repeat scroll 0 0 #C0DFFF;
/*    border: 1px solid #99B3CC;*/
	border:0;
/*    border-radius: 10px 10px 10px 10px;*/
/*    padding: 10px; */
}

.yui3-slideshow-content {
    position: relative;
    opacity:0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
}
.yui3-slideshow-content img ,#main-cavan img{
    position: absolute;
    top:0px;
}

.mytext{
	color: #fff;
	font-size: 200%;
	font-weight: bold;
	background-color: #000;
	opacity: 0.6;                 /* Firefox, Safari(WebKit), Opera)
	filter: "alpha(opacity=60)"; /* IE 8 */
	filter: alpha(opacity=60);   /* IE 4-7 */
	zoom: 1;                     /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */
	position: absolute;
	top : 20px;
	left: 20px;
	width: 100px; 
}

#slide-control{
	position: absolute;
	right: 20px;
	top:  20px;
	font-size: 120%;
	font-weight: bold;
	font-family: serif;
	
	background-color: #000;
	opacity: 0.3;                 /* Firefox, Safari(WebKit), Opera)
	filter: "alpha(opacity=30)"; /* IE 8 */
	filter: alpha(opacity=30);   /* IE 4-7 */
	zoom: 1;                     /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */
}

#slide-control a{
	color: #fff;
	text-decoration: none; 
	display: block;
}
.yui3-slidecontrol-content a{
	display: block;
}
</style>

</head>
<body>
<!-- 
<div style="width: 80px;" id="slide-control">
<div>
			<a href="#" style="float: left;" id="slide-control-prev" title="">&lt;</a>
			<a href="#" style="float: right;" id="slide-control-next">&gt;</a>
			<a href="#" style="margin: auto;width: 15px;" id="slide-control-pause-play">||</a>
</div>
</div>
 -->
<div class="mytext">
	<ul>
		<li>Hello World!</li>
		<li>Hello World!</li>
		<li>Hello World!</li>
		<li>Hello World!</li>
		<li>Hello World!</li>
	</ul>
	
</div>
<!-- 
<div id="main-cavan"  class="slideshow">
	<img alt="" src="./dayan-images/1.jpg"><img alt="" src="./dayan-images/2.jpg">
</div>
 -->
<script type="text/javascript">
YUI().use('node','yui-bg-slideshow','transition','slide-control', function(Y) {
	var bgslide = new Y.M3958.YuiBgSlideShow(slideControl:new Y.M3958.SlideControl({width:65,autoSlide:true}),
												autoSlide : false
											});
	bgslide.render();
/*	
	Y.later(10000,Y,function(e){
		bgslide.set('imgGroup',{name:"abc1",imgs:['./dayan-images/1.jpg','./dayan-images/0.jpg']});
	},[],true);
*/	
	/*
	var tpl = '<img alt="" src="{url}">';
	var bgimgs = ['./dayan-images/1.jpg','./dayan-images/2.jpg'];
	var body = Y.one(document.body);
	var imgNodes = [];
	Y.each(bgimgs,function(img,i){
		var imgNode = imgNodes[i] = Y.Node.create(Y.Lang.sub(tpl,{url:img}));
		imgNode.setStyles({position:'absolute',top:'0px'});
		body.append(imgNode);
	});
	
	var visualEffects = {
	    fadeOut: {
	        opacity: 0,
	        duration: 1,
	        easing: 'ease-out'
	    },
	 
	    fadeIn: {
	        opacity: 1,
	        duration: 1,
	        easing: 'ease-in'
	    }
	};
	
	var currentTop = 1;
	
	Y.later(3000,Y,function(e){
		if(currentTop === 1){
			imgNodes[1].transition(visualEffects.fadeOut);
			imgNodes[0].transition(visualEffects.fadeIn);
			currentTop = 0;
		}else{
			imgNodes[0].transition(visualEffects.fadeOut);
			imgNodes[1].transition(visualEffects.fadeIn);
			currentTop = 1;
		}
	},[],true);
	*/
	/*
	Y.later(3000,Y,function(e){
		var doc = Y.one(document);
		var bgslide = Y.one('#main-cavan');
		bgslide.setStyle('display','block');
		bgslide.setStyle('width',doc.get('winWidth'));
		bgslide.setStyle('height',doc.get('winHeight'));
		bgslide.setStyle('top','0');
		var slideshow = new Y.Slideshow({ srcNode: bgslide,
			nextButton: bgslide});
		slideshow.render();
	});

	
	var mainCavan = Y.one('#main-cavan'); 
	Y.log(mainCavan);
	mainCavan.setStyle('height',mainCavan.get('winHeight'));
	Y.later(1000,Y,function(e){
		mainCavan.hide(true);
	});
*/
});
</script>



<div id="panelContent">
    <div class="yui3-widget-hd">
        Showing an animated panel
    </div>
    <div class="yui3-widget-bd">
        <p>Making panels animate is easy with the "transition" module!</p>
    </div>
</div>


<script type="text/javascript">

YUI().use('transition', 'panel', function (Y) {

    var panel, bb;

    function showPanel() {
        panel.show();
        bb.transition({
            duration: 0.5,
            top     : '80px'
        });
    }

    function hidePanel() {
        bb.transition({
            duration: 0.5,
            top     : '-300px'
        }, function () {
            panel.hide();
        });
    }

    panel = new Y.Panel({
        srcNode: '#panelContent',
        width  : 330,
        xy     : [300, -300],
        zIndex : 5,
        modal  : true,
        visible: false,
        render : true,
        buttons: [
            {
                value  : 'Close the panel',
                section: 'footer',
                action : function (e) {
                    e.preventDefault();
                    hidePanel();
                }
            }
        ]
    });

    bb = panel.get('boundingBox');

 
    showPanel();

});

</script>
</body>
</html>